<template>
  <div class="CommonForm-container app-container nohead">
    <div class="dataForm">
      <el-alert
        title="普通文本、普通数值、日期时间主键的使用"
        type="warning"
        :closable="false"
      />
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="dataRule"
        label-width="110px"
        class="mt-10"
      >
        <el-divider content-position="left">普通文本框的使用</el-divider>
        <el-form-item label="普通文本框">
          <el-input v-model="dataForm.CommonText" placeholder="" />
        </el-form-item>
        <el-form-item label="座机号码">
          <el-input v-model="dataForm.TelePhone" placeholder="" />
        </el-form-item>
        <el-form-item label="当前登录人">
          <el-input v-model="dataForm.RealName" placeholder="" />
        </el-form-item>
        <el-divider content-position="left">普通数值框的使用</el-divider>
        <el-form-item label="自然数">
          <el-input v-model="dataForm.Natural" placeholder="" type="number" />
        </el-form-item>
        <el-form-item label="报销款">
          <el-input
            v-model="dataForm.Reimbursement"
            placeholder=""
            type="number"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="产品价格">
          <el-input
            v-model="dataForm.ProductPrice"
            placeholder=""
            type="number"
          >
            <el-button slot="append" @click="redy">随机设定</el-button>
          </el-input>
        </el-form-item>
        <el-divider content-position="left">日期时间主键的使用</el-divider>
        <!-- format="yyyy-MM-dd HH:mm"  value-format="yyyy-MM-dd HH:mm" -->
        <el-form-item label="生产日期">
          <el-date-picker
            v-model="dataForm.ProductionDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回款日期">
          <el-date-picker
            v-model="dataForm.ReturnMoneyDate"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划执行日期">
          <el-date-picker
            v-model="dataForm.PlanExecutionDate"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="统计月份">
          <el-date-picker
            v-model="dataForm.StatisticalMonth"
            type="month"
            placeholder="选择日期"
            value-format="yyyy-MM"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="规划日期">
          <el-date-picker
            v-model="dataForm.Programme"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="日期时间范围">
          <el-date-picker
            v-model="dataForm.Dates"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "extend-formDemo-fieldForm1",
  data() {
    return {
      dataForm: {
        CommonText: "",
        TelePhone: "0000-00000000",
        RealName: "",
        Natural: "",
        Reimbursement: "",
        ProductPrice: "",
        ProductionDate: "",
        ReturnMoneyDate: "",
        PlanExecutionDate: "",
        StatisticalMonth: "",
        Programme: "",
        Dates: "",
      },
      dataRule: {},
    };
  },
  methods: {
    init() {
      this.$refs["dataForm"].resetFields();
    },
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          // this.$message({
          //   message: '验证成功',
          //   type: 'success',
          //   duration: 1500,
          // })
        }
      });
    },
    redy() {
      function GetRandomNum(Min, Max) {
        let Range = Max - Min;
        let Rand = Math.random();
        return Min + Math.round(Rand * Range);
      }
      let num = GetRandomNum(1, 100);
      this.dataForm.ProductPrice = num;
    },
  },
};
</script>
<style lang="scss" scoped>
.CommonForm-container {
  common-head {
    height: 50px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }
  .dataForm {
    flex: 1;
    overflow: auto;
    .el-input {
      width: 300px;
    }
    .tip {
      margin-left: 10px;
      color: darkgray;
    }
  }
}
</style>
